<template>
	<view class="page" :style="{'--color': color}">
		<status-bar :title="store_id == 0 ? '添加店铺' : '编辑店铺'"></status-bar>
		<view class="padding30">
			<block v-for="(item,index) in formData" :key="index">
				<!-- 单行输入框 -->
				<view class="list" :class="{'required': item.required}" v-if="item.type == 'input'">
					<view class="color_80">{{ item.title }}：</view>
					<input class="m-top20" v-model="item.value" :placeholder="item.placeholder" />
				</view>

				<!-- 上传图片 -->
				<view class="list" :class="{'required': item.required}" v-if="item.type == 'img'">
					<view class="color_80">{{ item.title }}：</view>
					<view class="row">
						<block v-if="item.value.length">
							<view class="p-re" v-for="(subItem,subIndex) in item.value" :key="subIndex">
								<image :src="$imgUrls(subItem)" mode="aspectFill" class="upload"></image>
								<text class="iconfont icon-jianshao thmeColor p-ab"
									@click="delImg(index, subIndex)"></text>
							</view>
						</block>
						<image :src="staticUrl + '/images/jh_up/addImg.png'" class="upload"
							@click="uploadImage(item.num - item.value.length, index)"
							v-if="item.value.length < item.num"></image>
					</view>
				</view>

				<!-- 地址 -->
				<view class="list" :class="{'required': item.required}" v-if="item.type == 'address'">
					<view class="d-flex">
						<view class="flex-1 color_80">{{ item.title }}：</view>
						<view class="thmeColor" @click="locate(index)">
							<text class="iconfont icon-dingwei"></text>
							<text class="size28 m-left4">定位</text>
						</view>
					</view>
					<view class="p-top20 p-bot20 bot_bor_ee" @click="locate(index)">
						<view v-if="item.data.address_province">
							{{ item.data.address_province }}/{{ item.data.address_city }}/{{ item.data.address_area }}/{{ item.data.address_street }}
						</view>
						<view class="color_80" v-else>请选择省/市/区/街道</view>
					</view>
					<textarea class="textarea p-top20" v-model="item.value" :placeholder="item.placeholder"
						:maxlength="-1" auto-height disable-default-padding />

					<!-- <picker mode="selector" :range="street" range-key="RegionName" @change="streetChange($event, index)">
                        <view>请选择街道</view>
                    </picker> -->
				</view>

				<!-- 富文本 -->
				<view class="list" :class="{'required': item.required}" v-if="item.type == 'richtext'">
					<view class="color_80">{{ item.title }}：</view>
					<text-editor :content="item.value" :placeholder="item.placeholder" :index="index"
						@getContents="getContents"></text-editor>
				</view>
			</block>

			<view class="btn flexac thmeBg bor_radius_10 size30 white t-letter6" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import textEditor from './components/textEditor.vue'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				formData: [],
				store_id: '0', // 门店id、0为添加
				street: [] // 街道数据
			}
		},
		computed: {
			...mapState(['color', 'position', 'tdkey'])
		},
		components: {
			textEditor
		},
		onLoad(e) {
			if (e.store_id) this.store_id = e.store_id
			if (this.position.longitude == 0) this.$pop.getLocation()
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http.post({
					url: '/userAgentApi/getStoreDataInfo',
					data: {
						store_id: this.store_id
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg)
					this.formData = res.data || []
				})
			},
			// 获取编辑器内容
			getContents(html, index) {
				this.formData[index].value = html
			},
			uploadImage(count, index) {
				uni.chooseImage({
					count,
					success: res => {
						res.tempFilePaths.forEach(item => {
							this.$common.uploadFiles(item).then(result => {
								if (result.errcode != 100) return this.$Toast('上传失败')
								let Url = result.url.slice(22)
								this.formData[index].value.push(Url)
							})
						})
					}
				})
			},
			delImg(index, subIndex) {
				this.formData[index].value.splice(subIndex, 1)
			},
			submit() {
				let data = {
					store_id: this.store_id
				}
				let result = this.formData.find(item => item.required && (!item.value || !item.value.length))
				if (result) return this.$Toast(result.title + '不能为空')
				let address = this.formData.find(item => item.type == 'address')
				if (address) {
					if (!address.data.address_province) return this.$Toast('请定位省市区')
					data = {
						...data,
						...address.data
					}
				}

				this.formData.forEach(item => {
					if (item.type == 'img') { // 图片
						data[item.field_name] = item.value.join()
					} else {
						data[item.field_name] = item.value
					}
				})
				console.log(data)

				this.$http.post({
					url: '/userAgentApi/addStoreData',
					data
				}).then(res => {
					this.$Toast(res.msg)
					if (res.errcode != 100) return
					if (this.store_id == 0) this.store_id = res.data
				})
			},
			// 打开地图选择位置
			locate(index) {
				uni.chooseLocation({
					latitude: this.position.latitude,
					longitude: this.position.longitude,
					success: res => {
						console.log(res)
						let i = res.address.indexOf('区')
						this.formData[index].value = res.address.slice(i + 1) + res.name
						this.geocoder(res.longitude, res.latitude, index)
					},
					fail(err) {
						console.log(err);
					},
					complete(req) {
						console.log(req);
					}
				})
			},
			// 天地图-逆地理解析
			geocoder(lon, lat, index) {
				this.$showLoading('')
				this.$http.get_ds({
					url: '/geocoder',
					data: {
						postStr: {
							lon,
							lat,
							ver: 1
						},
						type: 'geocode',
						tk: this.tdkey
					}
				}).then(res => {
					this.$hideLoading()
					if (res.status != 0) return
					let result = res.result.addressComponent
					console.log(result, 'result');

					this.formData[index].data = {
						pointx: lon,
						pointy: lat,
						address_province: result.province,
						address_city: result.city || result.province,
						address_area: result.county,
						address_street: result.town,
						province: this.codeEidt(result.province_code),
						city: this.codeEidt(result.city_code || result.province_code),
						district: this.codeEidt(result.county_code),
						street: result.town_code.slice(3)
					}
					// 取后6位
					// if(result.county_code) this.getDivision(result.county_code.slice(-6))
				})
			},
			// 查询街道
			getDivision(regioncode) {
				this.$showLoading('')
				this.$http.post({
					url: '/singleSaleApi/getAdministrativeDivision',
					data: {
						regioncode: `${regioncode}00`
					}
				}).then(res => {
					this.$hideLoading()
					this.street = res.data || []
				})
			},
			streetChange(e, index) {
				let current = this.street[e.detail.value]
				this.formData[index].data.address_street = current.RegionName
				this.formData[index].data.street = current.RegionCode
			},
			codeEidt(codeTxt) {
				let result = codeTxt.slice(3) + '00'
				return result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		view,
		input {
			font-size: 28rpx;
		}
	}

	.list {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx 20rpx 20rpx 40rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.required::before {
		content: '*';
		font-size: 40rpx;
		color: var(--color);
		position: absolute;
		left: 10rpx;
		top: 10rpx;
	}

	.upload {
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
		margin: 20rpx 20rpx 0 0;
	}

	.icon-jianshao {
		top: 10rpx;
		right: 10rpx;
	}

	.textarea {
		width: 100%;
		min-height: 100rpx;
	}

	.btn {
		width: 260rpx;
		height: 80rpx;
		margin: 80rpx auto 0;
	}
</style>